<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <title>我的银行卡</title>
		 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no">	
    <link rel="stylesheet" href="../css/wzl-bootstrap.css?q=1111"/>
    <link rel="icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <style> 
    	#myBank .container{    		
    		padding:0;
    	}
    	.bankCard ul{
    		height:58px;
    		border:1px solid #E3E3E3; 
    		background-color: #fff; 
    		padding-left:0px;
    		padding:none;
    	}
    	.bankCard ul li img.col-xs-2{
    		width:100%;
    	}
    	.bankCard ul li .col-xs-7 {
    		margin-top:8px;
    		margin-left:8px;
    	}
    	.bankCard ul li img{
    		height:53px;
    		margin-top:1px;
    	}
    	.bankCard ul li .col-xs-7 span{
    		display:block;
    	}
    	.bankCard ul li .col-xs-7 span:nth-child(1){
    		font-size:16px;
    	}
    	.bankCard ul li .col-xs-7 span:nth-child(2){
    		color:#E3E3E3;
    		font-size:15px;
    	}
    	.col-xs-5{    		
    		text-align:right;
    		color:#E3E3E3;
    		height:59px;
    		line-height:59px;
    	}
    	.col-xs-7,.col-xs-5{
    		padding:0;
    	}
    	.btn{
    		background-color: #e4393c;
		    height: 39px;
		    line-height: 26px;
		    margin-top: 20px;
		    font-size:16px;
		    color: #fff;
		}   
		.bankCard ul li.col-xs-5 span img{
			height:17px;		
		}	
		.bankCard ul li.col-xs-5 span.shanchu{
			width:13vw;
			display:inline-block;
			text-align: center;			
		}			
		.modal-header{
			border:none;
		}
		.modal-body{
			text-align:center;
			padding-bottom:0;
		}		
		.modal-body p{
			margin-bottom:0;
			font-size:18px;
		}
		
		.modal-footer{
		border:none;
		padding-top:0;
		}
		.modal-block{
			display:block;
		}
		.modal-content{			
			width:80vw;
			margin:0 auto;
			margin-top:100px;
		}
		.edit{
			float: right;    
		    display: inline-block;
		    width: 60px;
		}
		.bankInfo b{
			display:inline-block;
			width:5px;
		}
		.delete-prompt{
			font-size:12px;
			margin-top:6px;
			text-align: center;
		}
    </style>
	</head>
	<body>
	<div id="myBank">
		<div class="container">
			<nav class="wzl-navbar navbar-default" role="navigation">
			    <div class="container-fluid">
			        <div class="navbar-header">
			            <div class="wzl-nav-bar" onclick="history.back(-1)">
			                <span class="glyphicon glyphicon-wzl-back"></span>我的银行卡		                
			            </div>
			            <span class="edit">编辑</span>
			        </div>
			    </div>
			</nav>
			<div class="bankCard col-xs-12">
				
			</div>
			<div class="btn col-xs-10 col-xs-offset-1 addCard">添加银行卡</div>
			<div class="col-xs-12 delete-prompt">(如需删除银行卡，请点击上方的编辑进行操作)</div>
		</div>
	</div>
    <div class="modal">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	       
	      </div>
	      <div class="modal-body">
	        <p>是否删除该银行卡</p>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn" data-dismiss="modal">取消</button>
	        <button type="button" class="btn btn-confirm ">确认</button>
	      </div>
	    </div>
	  </div>
	</div>
	<script src="../../wzlh5/js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../../wzlh5/js/common.js"></script>
	<script>		
		$(document).ready(function(){
			var paramStr = {};
			paramStr.phoneNum =localStorage.getItem("phoneNum");
			var params = {};
			params.paramStr = JSON.stringify(paramStr);
			Common.ajaxWithParam("/fenful/api/v1/common/getUserBankList", params, function(data) {       			       		
	       		
	       		    var html="";
	       		    var bank_name="";
	       		   console.log(data);
	       			for(var i=0;i<data.length;i++){
		       			data[i].bankNum=data[i].bankNum.substr(data[i].bankNum.length-4);
		       			var bankName=""
		       			if(data[i].bankId==1){
		       				data[i].bankId="工商银行";
		       			}else if(data[i].bankId==2){
		       				data[i].bankId="农业银行";
		       			}else if(data[i].bankId==3){
		       				data[i].bankId="中国银行";
		       			}else if(data[i].bankId==4){
		       				data[i].bankId="建设银行";
		       			}else if(data[i].bankId==5){
		       				data[i].bankId="招商银行";
		       			}else if(data[i].bankId==6){
		       				data[i].bankId="邮储银行";
		       			}else if(data[i].bankId==7){
		       				data[i].bankId="交通银行";
		       			}else if(data[i].bankId==8){
		       				data[i].bankId="浦发银行";
		       			}else if(data[i].bankId==9){
		       				data[i].bankId="民生银行";
		       			}else if(data[i].bankId==10){
		       				data[i].bankId="兴业银行";
		       			}else if(data[i].bankId==11){
		       				data[i].bankId="平安银行";
		       			}else if(data[i].bankId==12){
		       				data[i].bankId="中信银行";
		       			}else if(data[i].bankId==13){
		       				data[i].bankId="华夏银行";
		       			}else if(data[i].bankId==14){
		       				data[i].bankId="广发银行";
		       			}else if(data[i].bankId==15){
		       				data[i].bankId="光大银行";
		       			}else if(data[i].bankId==16){
		       				data[i].bankId="北京银行";
		       			}else if(data[i].bankId==17){
		       				data[i].bankId="宁波银行";
		       			}
		       			html +=`
		       			<ul>
							<li class="col-xs-7">
								<div class="col-xs-4"><img src=${data[i].bankLogo} alt="" /></div>
								<div class="col-xs-7">
									<span class="bankName">${data[i].bankId}</span>
									<span class="bankNumber">储蓄卡</span>
								</div>
							</li>
							<li class="col-xs-5 bankInfo">
								(尾号<span class="lastNumber">${data[i].bankNum}</span>)<b></b>
								<span class="shanchu hidden" value=${data[i].userBankId}><img src="../imgs/analyse/shanchu.png" alt="" /></span>
							</li>
				  		</ul>
		       			`;
	       		}	       			       	
	       		$(".bankCard").html(html);	
	       		var bankCard;
				$('.bankInfo').on('click','.shanchu',function(){
					$('.modal').addClass('modal-block'); 
					var html=$(this).parent().parent();
					var bankInfo=$(this).attr("value");
					var arr=[html,bankInfo]
					bankCard=function(){
						return  arr;						
					}
					removeCard();
				})
				function removeCard(){
					if(bankCard){
						$(".btn-confirm").on("click",function(e){
//							e.preventDefault;
//							e.stopPropagation();
							bankCard()[0].remove();
							cardlen();
							var paramStr = {};
							var bankValue=bankCard()[1];							
						    paramStr.phoneNum =localStorage.getItem("phoneNum");
						    paramStr.bankId =bankValue;						    						    
						    var params = {};
						    params.paramStr = JSON.stringify(paramStr);	
						    console.log(params);
							Common.ajaxWithParam("/fenful/api/v1/common/deleteBank", params, function(data) {
					       		console.log(data);
			
							});
						})
					}
				}
			});
	    });
	  	    		 						
		$(".btn,.close").on('click',function(){
			$('.modal').removeClass('modal-block');
		})
		$('.edit').on('click',function(){
			var editText=$('.edit').text();
			if(editText=="编辑"){				
				$('.edit').text('完成');
				$(".shanchu").removeClass('hidden');
			}else if(editText=="完成"){				
				$('.edit').text('编辑');
				$(".shanchu").addClass('hidden');
			}
		})
		$('.addCard').on('click',function(){
			location.href="../views/bindbank.html";
		}) 
		function cardlen(){
			var cardLen=$('.bankCard').children().length
			if(cardLen>0){
				$('.delete-prompt').removeClass('hidden')
			}else{
				$('.delete-prompt').addClass('hidden');
			}
		}
		window.onload=function(){
			cardlen();
		}
	</script>
	</body>
</html>
